<template>
    <div>
        <div class="title">{{editFormData.anIndexEvaluationMain.reginId}}县区数据填报</div>
        <div class="sub-title">
            <div>所属区县：{{editFormData.anIndexEvaluationMain.reginId}}</div>
            <div>填报人：{{editFormData.anIndexEvaluationMain.auditBy}}</div>
            <div>填报日期：{{editFormData.anIndexEvaluationMain.lstUpdTime}}</div>
            <div>指标总数：{{editFormData.anIndexEvaluationMain.totalQuestionNums}}</div>
            <div>当前填报序号：{{editFormData.anIndexEvaluationMain.currQuestionSeq}}</div>
        </div>
        <div>
            <el-form :model="targetForm" ref="targetForm" :rules="rules" label-width="120px" class="demo-ruleForm" v-if="editProgress === 'detail'">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item label="指标代码" prop="indexCode">
                          <el-input v-model="targetForm.indexCode" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="指标描述" prop="indexDesc">
                            <el-input v-model="targetForm.indexDesc" disabled></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="评估年度" prop="estimateYear">
                            <el-input v-model="targetForm.estimateYear" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="自评时间" prop="reginEvalTime">
                            <el-input v-model="targetForm.reginEvalTime" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="自评人员" prop="reginEvayBy">
                            <el-input v-model="targetForm.reginEvayBy" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-for="(level,index) in targetForm.scoreList" :key="index">
                    <el-col :span="6">
                        <el-form-item label="自评能力项目" prop="">
                            <el-input :value="level.optionDesc" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="自评能力等级" prop="">
                            <el-select v-model="level.score" placeholder="请选择能力等级">
                                <el-option :label="score.level" :value="score.score" v-for="(score,index) in levelList" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="上传的材料">
                    <mul-pic-upload :disabled="controlType !== 'area'" v-model="targetForm.imgs" />
                </el-form-item>
              <el-form-item label="自评不足" prop="reginEvalBz">
                <el-input type="textarea" v-model="targetForm.reginEvalBiz" :disabled="controlType !== 'area'"></el-input>
              </el-form-item>
              <el-form-item label="自评概述" prop="reginEvalBiz">
                <el-input type="textarea" v-model="targetForm.reginEvalLack" :disabled="controlType !== 'area'"></el-input>
              </el-form-item>


              <el-divider v-if="controlType === 'expert'">
                以下信息为专家填写信息
              </el-divider>
                <el-row :gutter="20" v-if="controlType === 'expert'">
                    <el-col :span="6">
                        <el-form-item required label="评估等级" prop="expertEvalScore">
                            <el-select required v-model="targetForm.expertEvalScore" placeholder="请选择专家评估成绩">
                                <el-option :label="score.level" :value="score.score" v-for="(score,idx) of levelList" :key="idx"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="评估时间"  prop="expertEvalTime">
                            <el-input v-model="targetForm.expertEvalTime" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="评估人员" prop="expertEvayBy">
                            <el-input v-model="targetForm.expertEvayBy" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
              <el-form-item label="存在主要短板" required prop="expertEvalLack" v-if="controlType === 'expert'">
                <el-input type="textarea" v-model="targetForm.expertEvalLack"></el-input>
              </el-form-item>
                <el-form-item label="主要建议" required prop="expertEvalBiz" v-if="controlType === 'expert'">
                    <el-input type="textarea" v-model="targetForm.expertEvalBiz"></el-input>
                </el-form-item>

            </el-form>
            <div v-if="editProgress === 'main'">
                <el-form :model="ruleForm" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                    <el-form-item label="区县整体自评意见" prop="reginEvalDesc">
                        <el-input v-model="ruleForm.reginEvalDesc" type="textarea" :disabled="controlType !== 'area'"></el-input>
                    </el-form-item>
                    <el-form-item label="省市审批意见" prop="auditDesc" v-if="controlType !== 'area'">
                        <el-input v-model="ruleForm.auditDesc" type="textarea" :disabled="controlType === 'expert'"></el-input>
                    </el-form-item>
                  <el-form-item label="整体短板" prop="expertLack" v-if="controlType === 'expert'">
                    <el-input v-model="ruleForm.expertLack" type="textarea"></el-input>
                  </el-form-item>
                    <el-form-item label="专家建议" prop="expertBiz" v-if="controlType === 'expert'">
                        <el-input v-model="ruleForm.expertBiz" type="textarea"></el-input>
                    </el-form-item>

                </el-form>
            </div>
            <div class="btn-box">
                <el-button @click="before" v-if="editFormData.anIndexEvaluationMain.currQuestionSeq !== 0">上一项</el-button>
                <el-button type="primary" @click="next" v-if="editProgress === 'detail'">下一项</el-button>
                <el-button type="primary" @click="allSave" v-if="controlType === 'area' && editProgress === 'main'">保存填报内容</el-button>
                <el-button type="danger" @click="cityReject" v-if="editProgress === 'main' && controlType === 'city'">驳回</el-button>
                <el-button type="primary" @click="allSubmit" v-if="editProgress === 'main' && controlType === 'area'">完成填报</el-button>
                <el-button type="primary" @click="expertAudit" v-if="editProgress === 'main' && controlType === 'expert'">完成评估</el-button>
                <el-button type="primary" @click="viewIndexDtl" v-if="editProgress === 'main' && controlType === 'expert'">建议明细</el-button>

                <el-button type="primary" @click="cityAudit" v-if="editProgress === 'main' && controlType === 'city'">审批通过</el-button>
            </div>
        </div>
      <indexauditdtl ref="auditdtl" v-if="auditDtlVisible" >
      </indexauditdtl>
    </div>
</template>

<script>
import MulPicUpload from '@/components/mul-pic-upload/index.vue'
import indexauditdtl from './indexauditdtl'
import {levelList} from "@/utils/data"
export default {
	components: {MulPicUpload,indexauditdtl},
	props: {
		// 权限控制// area -- 区县   city -- 省市  expert -- 专家
		controlType : {
			type : String,
			default : "area"
		},
        editFormData : {
            type : Object,
            default: (() => {
                return {}
            })
        }
	},
    computed: {

    },
	data() {
		return {
            editProgress: "detail",//填报进度。 主页面 or 指标详情页面
            targetIndex : 0,
            auditDtlVisible:false,
			ruleForm: {
				reginEvalDesc : "",
				auditDesc : "",
				expertBiz : "",
                expertLack : "自动将各个明细项的短板带出然后专家在上面修改"
			},
			/**
			 * Name	Code	Comment	Data Type	Length	Precision	Primary	Foreign Key	Mandatory
			 * id	id	主键ID	varchar(100)	100		FALSE	FALSE	FALSE
			 * eval_main_id	eval_main_id	考核主表ID	varchar(100)	100		FALSE	TRUE	FALSE
			 * index_id	index_id	指标ID	varchar(100)	100		FALSE	TRUE	FALSE
			 * regin_eval_score	regin_eval_score	县级自评成绩	int			FALSE	FALSE	FALSE
			 * regin_evay_by	regin_evay_by	县级自评人	varchar(100)	100		FALSE	FALSE	FALSE
			 * regin_eval_time	regin_eval_time	县级自评时间	varchar(100)	100		FALSE	FALSE	FALSE
			 * regin_eval_biz	regin_eval_biz	县级自评说明	varchar(100)	100		FALSE	FALSE	FALSE
			 * regin_eval_lack	regin_eval_lack	县级自评不足	varchar(100)	100		FALSE	FALSE	FALSE
			 * expert_eval_score	expert_eval_score	专家自评成绩	varchar(100)	100		FALSE	FALSE	FALSE
			 * expert_evay_by	expert_evay_by	专家评估人	varchar(100)	100		FALSE	TRUE	FALSE
			 * expert_eval_time	expert_eval_time	专家评估时间	varchar(100)	100		FALSE	FALSE	FALSE
			 * expert_eval_biz	expert_eval_biz	专家评估说明	varchar(100)	100		FALSE	FALSE	FALSE
			 * expert_eval_lack	expert_eval_lack	专家评估不足	varchar(100)	100		FALSE	FALSE	FALSE
			 * status	status	明细状态同主	varchar(2)	2		FALSE	FALSE	FALSE	前台不显示
			 * */
			targetForm: {
				id: "",
				indexCode: "",
				reginEvalDesc: "",
				estimateYear: "",
                nl: [],
                nlList: [],
				imgs: "",
				reginEvalScore: "",
				reginEvalTime: "",
				reginEvayBy: "",
				reginEvalBiz: "",
				reginEvalLack: "",
				expertEvalScore: "",
				expertEvayBy: "",
				expertEvalTime: "",
				expertEvalBiz: "",
				expertEvalLack: "可以复制县级建议然后在上面修改",
				scoreList: []
			},
			rules: {
				reginEvalDesc: [
					{ required: true, message: '请输入整体自评意见', trigger: 'blur' }
				],
				expertBiz: [
					{ required: true, message: '请输入专家评估整体意见', trigger: 'blur' }
				],
				auditDesc: [
					{ required: true, message: '请输入省市评估意见', trigger: 'blur' }
				],
                score: [
                    { required: true, message: '能力等级不能为空', trigger: 'change' }
                ]
			},
            levelList : levelList
		};
	},
	mounted () {
        this.editProgress = "detail";
        this.initData();
	},
	methods: {
        initData(){
            this.editFormData = JSON.parse(sessionStorage.areaInitFormData);
            console.log('🚀 ~ this.editFormData', this.editFormData);
            this.targetForm = {
                ...this.editFormData.currentIndexInfo.anBasIndex,
                ...this.editFormData.currentEvalDtl,
                expertEvalTarget: "",
                scoreList: this.editFormData.scoreList,
                currQuestionSeq: this.editFormData.anIndexEvaluationMain.currQuestionSeq,
                anIndexAbilityOptionsList : this.editFormData.currentIndexInfo.anIndexAbilityOptionsList,
                opertinMode : this.editFormData.currentIndexInfo.anBasIndex.opertinMode,
                expertEvalScore : this.editFormData.currentEvalDtl.expertEvalScore,
                reginEvalBiz : this.editFormData.currentEvalDtl.reginEvalBiz,
                reginEvalLack : this.editFormData.currentEvalDtl.reginEvalLack,
                reginEvalTime : this.editFormData.currentEvalDtl.reginEvalTime || wfy.format('yyyy-MM-dd HH:mm:ss',new Date()),
                reginEvayBy : this.editFormData.currentEvalDtl.reginEvayBy || this.$store.state.user.name,
            };
            this.$forceUpdate();
        },

		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {

				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
        // 获取score对应的level
        getLevelForScore(score){
            let level = this.levelList.find((item) => {
                return item.score === score
            })
            return level.level;
        },
        // 获取能力选项为空的项目
        getScoreEmptyData(){
            let emptyList = this.targetForm.scoreList.filter((item) => {
                return item.score === "" || item.score === null
            })
            console.log('🚀 ~ emptyList', emptyList)
            return emptyList;
        },
		before(){

		},
		next(){
            if(this.editFormData.anIndexEvaluationMain.currQuestionSeq === this.editFormData.anIndexEvaluationMain.totalQuestionNums){
                this.editProgress = "main";
            }else{
                // this.switchCurrEvalInfo("L");
                this.saveDetail("L");
            }
		},
        // 保存详细信息
        saveDetail(type){
            console.log('🚀 ~ this.targetForm', this.targetForm);
            let emptyList = this.getScoreEmptyData();
            if(emptyList.length){
                this.$message.warning(emptyList[0].optionDesc + "自评能力等级不能为空！");
                return;
            }
            this.targetForm.scoreList.forEach((level) => {
                level.level = this.getLevelForScore(level.score)
            })
            this.$http({
                url: this.$http.adornUrl('/eval/saveDtl'),
                method: "post",
                data: this.$http.adornData({
                    "anIndexEvaluationDtl": {
                        "evalDtlId": this.targetForm.evalDtlId,
                        "evalMainId": this.targetForm.evalMainId,
                        "indexId": this.targetForm.indexId,
                        "reginEvalScore": this.targetForm.reginEvalScore,
                        "reginEvayBy": this.targetForm.reginEvayBy,
                        "reginEvalTime": this.targetForm.reginEvalTime,
                        "reginEvalBiz": this.targetForm.reginEvalBiz,
                        "reginEvalLack": this.targetForm.reginEvalLack,
                        "expertEvalScore": this.targetForm.expertEvalScore,
                        "expertEvayBy": this.targetForm.expertEvayBy,
                        "expertEvalTime": this.targetForm.expertEvalTime,
                        "expertEvalBiz": this.targetForm.expertEvalBiz,
                        "expertEvalLack": this.targetForm.expertEvalLack,
                        "status": this.targetForm.status
                    },
                    "scoreList": this.targetForm.scoreList
                })
            }).then(({
                data
            }) => {
                console.log('🚀 ~ data', data)
                if(data){
                    this.switchCurrEvalInfo(type);
                }
            })
        },
        // 切换上一个下一个指标
        switchCurrEvalInfo(type){

            this.$http({
                url: this.$http.adornUrl('/eval/switchCurrEvalInfo'),
                method: "post",
                data: this.$http.adornData({
                    "operFlag": type,
                    "evalMainId": this.targetForm.evalMainId,
                    "evalCurrDtlId": this.targetForm.evalDtlId,
                    "evalCurrDtlOrder": this.targetForm.currQuestionSeq,
                    "evalTotalDtlNums": this.editFormData.anIndexEvaluationMain.totalQuestionNums
                })
            }).then(({
                data
            }) => {
                if(data){
                    sessionStorage.areaInitFormData = JSON.stringify(wfy.deepCopy(data));
                    this.initData();
                }
            })
        },
        // 区县保存填报进度
		allSave(){
			this.$alert("保存成功！","友情提醒");
		},

        viewIndexDtl() {
            this.auditDtlVisible = true
            this.$nextTick(() => {
                this.$refs.auditdtl.init();
            })
        },
        // 区县最终提交
		allSubmit(){
			this.$alert("您已填报完成，请等待审核结果！","友情提醒",{
				callback: () => {
					this.editProgress = "main";
				}
			})
		},
        // 省市审批
        cityAudit(){

        },
        // 省市驳回
        cityReject(){

        },
        // 专家审批保存
        expertAudit(){

        },
	}
}
</script>

<style lang="scss" scoped>
    .title{
        height: 40px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26px;
        font-width: bolder;
    }
    .btn-box{
        display: flex;
        height: 60px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .sub-title{
        height: 40px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 14px;
        margin-bottom: 10px;
        font-weight: bold;
        color: #909399;
    }
</style>
